import { FC, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'umi';
import styles from './poster.less';
import { Input, Button, Pagination, Drawer, Popover, message } from 'antd';
import { PosterList } from '@/utils/poster';
const Poster: FC = () => {
    const dispatch = useDispatch();
    const result = useSelector((state: { poster: any }) => state.poster);
    //模糊搜索
    const [val, setval] = useState('')
    const [params, setparams] = useState<any>({ page: 1, pageSize: 10 });
    useEffect(() => {
        //海报列表
        dispatch({
            type: 'poster/getPosterList',
            payload: { params }
        })
    }, [params]);
    //抽屉弹框
    const [visible, setVisible] = useState(false);
    //详情
    const [details, setdetails] = useState<PosterList>({} as PosterList);
    let id = localStorage.getItem('id');
    useEffect(() => {
        if (result.PosterList[0]) {
            let res = result.PosterList[0].filter((item: any) => {
                return item.id == id
            })[0];
            setdetails(res)
        }
    }, [id]);
    const error = () => {
        message.error('用户没有权限');
    };
    //气泡卡片
    const content = (
        <div>
            <Button onClick={() => { setVisible(false) }}>取消</Button>
            <Button type='primary' onClick={() => {
                error()
            }}>确认</Button>
        </div>
    );
    //时间
    function renderTime(date: any) {
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
    return <div className={styles.poster}>
        <div className={styles.search}>
            <p><span>文件名称:</span><Input value={val} onChange={(e) => { setval(e.target.value) }} /></p>
            <p>
                <Button type="primary" onClick={() => {
                    setparams({ ...params, name: val })
                }}>搜索</Button>
                <Button onClick={() => { setval('') }}>重置</Button>
            </p>
        </div>
        <div className={styles.content}>
            {
                result.PosterList[0] && result.PosterList[0].map((item: PosterList, index: number) => {
                    return <div key={index} onClick={() => {
                        setVisible(true);
                        localStorage.setItem('id', item.id)
                    }}>
                        <p style={{
                            display: 'inline-block',
                            background: `url("${item.imgUrl}") center center / cover no-repeat`,
                        }}>
                        </p>
                        <p>
                            <span>{item.name}</span>
                            <span>上传于{renderTime(item.createAt)}</span>
                        </p>
                    </div>
                })
            }
        </div>
        <div className={styles.page}>
            <Pagination defaultCurrent={1} total={result.contentLen} />
        </div>
        <div className={styles.details}>
            <Drawer
                title="文件信息"
                placement="right"
                closable={false}
                width={600}
                onClose={() => { setVisible(false); }}
                visible={visible}
            >
                <div className={styles.cont}>
                    {/* <p style={{
                        display: 'inline-block',
                        background: `url("${details.imgUrl}") center center / cover no-repeat`,
                    }}>
                    </p> */}
                    <p><img src={details.imgUrl} style={{ width: 560, height: 400 }} /></p>
                    <p>文件名称:{details.name}</p>
                    <p>上传时间:{renderTime(details.createAt)}</p>
                    <p>制作页面:{details.pageUrl}</p>
                    <p>文件大小:{(details.size / 1000).toFixed(2)}KB</p>
                    <p>访问链接:</p>
                </div>
                <div className={styles.btn} style={{ marginTop: 150, borderTop: '1px solid #ccc', paddingTop: 20 }}>
                    <Button type="primary" onClick={() => { setVisible(false) }}>关闭</Button>
                    <Popover content={content} title='确定删除信息吗?' trigger="click" >
                        <Button type="primary" danger>删除</Button>
                    </Popover>
                </div>
            </Drawer>
        </div>
    </div>
};
export default Poster;